<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字体样式</title>
    <style>
        /*在未设置字体大小的时候,默认为16px*/
        .c1{
            font-size: 32px;
            /*font-weight: bold;*/
            /*设置粗体*/
            font-weight: 700;
            /*设置斜体*/
            font-style: italic;
            font-family: '宋体';
        }
        /*
            em是根据父元素字体大小进行设置,其值为父元素的倍数
            1em=父元素的字体大小,2em=父元素字体大小*2
        */
        .c2{
            /*
                2 * 16 = 32px
            */
            font-size: 2em;
            font-weight: bolder;
            font-style: italic;
            font-family: '新宋体';
        }
        #d1{
            font-size: 20px;
        }
        .c6{
            /*
                1.5*20 = 30px
            */
            font-size: 1.5em;
            font-family: '楷体';
        }
        .c5{
            font-size: 30px;
            font-family: 'Angsana New';
        }
        .c3{
            /*
                rem是根据浏览器字体大小进行倍数
                2*16px=32px
            */
            font-size: 2rem;
            font-family: 'KodchiangUPC';
        }
        .c7{
            font: italic bolder 2em '楷体';
        }
    </style>
</head>
<body>
<p class="c1">第1个段落</p>
<p class="c2">第2个段落</p>
<p class="c3">第3个段落</p>
<p class="c4">第4个段落</p>
<p class="c5">第5个段落</p>
<div id="d1">
    <p class="c6">这是div中的段落</p>
</div>
<p class="c7">这是第7个段落</p>
</body>
</html>